<template>
  <!-- html 结构 -->
  <div class="car">
    <h2>一辆 {{ car.brand }} 汽车，价值{{ car.price }}万</h2>
    <button v-on:click="addPrice">价格上调</button>
    <button @:click="subPrice">价格下调</button>
    <button @:click="changeCar">修改汽车</button>
    <hr />
    <h2>SUM的值：{{ sum }}</h2>
    <button @click="changeSum">修改sum的值</button>
  </div>
</template>

<!-- 使用命令安装插件 "npm i vite-plugin-vue-setup-extend -D" -->
<!-- 修改vite.config.ts配置文件，1、导入插件import VueSetupExt from 'vite-plugin-vue-setup-extend'，2、然后追加调用VueSetupExt() -->
<!-- 在script标签上使用 name='组件名' -->
<script lang="ts" setup name="Car">
// 从vue引入ref函数
import { reactive, ref } from "vue";
// 响应式数据，re
let car = reactive({ brand: "奔驰", price: 100 });
let sum = ref(0);

function addPrice() {
  car.price += 10;
  console.log(car.price);
  console.log(car);
}
function subPrice() {
  car.price -= 10;
  console.log(car.price);
}
function changeCar() {
  // 重新定义reactive包装的对象会导致对象不再是响应式的，页面将不再刷新
  // car = { brand: "奥迪", price: 50 };
  // car = reactive({ brand: "奥迪", price: 50 })

  // 这种写法会刷新页面
  car = Object.assign(car, { brand: "奥迪", price: 50 });

  // 如果是有ref定义的对象的话，car.value = { brand: "奥迪", price: 50 } 是可以这么写的，因为“.value”就是将car变成响应式的了
}

function changeSum() {
  // 这样写可以修改sum的值
  // sum.value +=1

  // 这样写不会修改sum的值
  sum = ref(9);
  console.log(sum.value);
}
</script>

<!-- 总结一下ref和reactive的使用原则 -->
<!-- 1、需要一个基本数据类型的响应式数据，必须使用ref -->
<!-- 若需要一个响应式的对象，如果层级不深，ref、reactive都可以 -->
<!-- 若需要一个响应式的对象，如果层级较深，推荐使用reactive -->

<style>
/* 样式 */
.car {
  background-color: rgb(102, 105, 93);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}

button {
  /* 上下是0，左右10个像素 */
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>
